<template>
  <div>
    <el-button class="mr-2.5" @click="searchCombox"> 组合查询</el-button>

    <el-dialog
        v-if="dialogSearchCombox"
        v-model="dialogSearchCombox"
        title="设置组合查询"
        width="600"
        :center="true"
        :close-on-click-modal="false"
    >
      <div margin-top>
        选择日期：
        <el-date-picker class="mr-2.5"
                        v-model="timeString"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        date-format="YYYY-MM-DD"
                        time-format="HH:mm:ss"
                        @change="timeChange"
        />
      </div>
      <div class="margin-top">
        选择用户标识：
        <el-select clearable placeholder="用户" v-model="data.operator" style="width: 240px" class="ml-2.5">
          <el-option value="1">用户</el-option>
        </el-select>
      </div>
      <div class="margin-top">
        选择应用资源：
        <el-select clearable placeholder="资源" v-model="data.resource" style="width: 240px" class="ml-2.5">
          <el-option value="1">资源</el-option>
        </el-select>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogSearchCombox = false"> 确认</el-button>
          <el-button @click="dialogSearchCombox = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref} from "vue";
import moment from "moment/moment.js";

const dialogSearchCombox = ref(false);
const timeString = ref(["", ""]);
const timeChange = () => {
  timeString.value[0] = moment(timeString.value[0]).format("YYYY-MM-DD HH:mm:ss");
  timeString.value[1] = moment(timeString.value[1]).format("YYYY-MM-DD HH:mm:ss");
  auditLogTable.value.getTableData();
};
const searchCombox = () => {
  dialogSearchCombox.value = true;
};

const data = {
  operator: "用户",
  resource: "资源",
}
</script>

<style lang="scss" scoped>
.back {
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  span {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}

.envet-button {
  display: flex;
  border-radius: 17px;
  overflow: hidden;
  border: 1px solid $base-color;
  font-size: 14px;
  color: #444;
  cursor: pointer;

  li {
    padding: 5px 18px;
    background-color: #fff;
    border-right: 1px solid $base-color;
  }

  li:last-child {
    border-right: none;
  }
}

li.active {
  background-color: $base-color;
  color: #fff;
}

.filter-box {
  position: absolute;
  left: 210px;
  top: 97px;
}

.audit-form {
  font-size: 14px;
}

.form-tip {
  display: inline-block;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
}

.radio-tip {
  font-size: 12px;
  color: #999;
  margin-left: 22px;
}

.margin-top {
  margin-top: 22px;
}
</style>
